<template>
    <el-input-number v-model="val" :min="item?.extra?.min ?? -Infinity" :max="item?.extra?.max ?? Infinity" :step="item?.extra?.step ?? 1" :disabled="item?.disabled ?? false" @change="item?.callbacks?.handleChange" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { FormItemDto } from '@/components/form-component/type'

const props = defineProps({
    value: {
        type: [String, Number, Array] as PropType<string | number | Array<string | number>>,
    },
    size: {
        type: String as PropType<'large' | 'default' | 'small'>,
        default: 'default'
    },
    item: {
        type: Object as PropType<FormItemDto>,
        required: true
    }
})

const emits = defineEmits(['update:value', 'change'])

const val = ref()

watch(() => props.value, (newval) => {
    val.value = newval
}, {
    immediate: true
})

watch(val, (newval) => {
    emits('update:value', newval)
}, {
    deep: true
})

</script>
<style lang="scss" scoped>
</style>
